<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3的使用</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    {{ message }}
</div>
<!--声明式渲染-->
<h2>声明式渲染</h2>
<div id="counter">
    Counter: {{ counter }}
</div>
<!--绑定元素-->
<h2>绑定元素</h2>
<div id="bind-attribute">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<!--处理用户输入：-->
<h2>处理用户输入</h2>
<div id="event-handling">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转 Message</button>
</div>
<!--演示v-model命令的使用-->
<h2>演示v-model命令的使用</h2>
<div id="two-way-binding">
    <p>{{ message }}</p>
    <input v-model="message" />
</div>
<!--条件-->
<h2>条件</h2>
<div id="conditional-rendering">
    <span v-if="seen">现在你看到我了</span>
</div>
<!--循环-->
<h2>循环</h2>
<div id="app-4">
    <ol>
        <li v-for="todo in foos">
            {{ todo.userName }} {{todo.userCode}}
        </li>
    </ol>
</div>

<!--组件化应用构建-->
<h2>组件化应用构建</h2>
<div id="todo-list-app">
    <ol>
        <!--
         现在我们为每个 todo-item 提供 todo 对象
         todo 对象是变量，即其内容可以是动态的。
         我们也需要为每个组件提供一个“key”，稍后再
         作详细解释。
       -->
        <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id"
        ></todo-item>
    </ol>
</div>


</body>
</html>

<script>
    //组件化应用构建
    const TodoItem = {
        props: ['todo'],
        template: `<li>{{ todo.userName }} {{ todo.userCode }}</li>`
    }

    const TodoList = {
        data() {
            return {
                groceryList: []
            }
        },
        created() {
            //异步获取数据
            fetch('http://localhost:8080/list')
                .then(response => response.json())
                .then(json => {
                    this.groceryList = json;
                })
        },
        components: {
            TodoItem
        }
    }

    const app = Vue.createApp(TodoList)

    app.mount('#todo-list-app')

    //初识
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello World!!!!'
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#hello-vue')
    //Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
    //声明式渲染
    const Counter = {
        data() {
            return {
                counter: 0
            }
        },
        mounted() {
            setInterval(() => {
                this.counter++
            }, 1000)
        }
    }
    Vue.createApp(Counter).mount('#counter')

    //绑定元素
    const AttributeBinding = {
        data() {
            return {
                message: 'You loaded this page on ' + new Date().toLocaleString()
            }
        }
    }
    Vue.createApp(AttributeBinding).mount('#bind-attribute')

    //处理用户输入
    const EventHandling = {
        data() {
            return {
                message: 'Hello Vue.js!'
            }
        },
        methods: {
            reverseMessage() {
                this.message = this.message
                    .split('')
                    .reverse()
                    .join('')
            }
        }
    }

    Vue.createApp(EventHandling).mount('#event-handling')

    //演示v-model命令的使用
    const TwoWayBinding = {
        data() {
            return {
                message: 'Hello Vue!'
            }
        }
    }

    Vue.createApp(TwoWayBinding).mount('#two-way-binding')


    //条件
    const ConditionalRendering = {
        data() {
            return {
                //将 seen 从 true 更改为 false，以检查效果
                seen: true
            }
        }
    }
    Vue.createApp(ConditionalRendering).mount('#conditional-rendering')


    const app4 = {
        data() {
            return{
                foos:[]
            }
        },
        created() {
            //异步获取数据
            fetch('http://localhost:8080/list')
                .then(response => response.json())
                .then(json => {
                    this.foos = json;
                })
        }
    }
    Vue.createApp(app4).mount('#app-4')
</script>